<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表排序_computed实现</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyword">
    <button @click="sortType=0">原序排列</button>
    <button @click="sortType=1">年龄升序↑</button>
    <button @click="sortType=2">年龄降序↓</button>
    <ul>
        <li v-for="(item,index) in fmtPersons" :key="item.id">
            {{ item.name }}---{{item.age}}---{{item.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data() {
            return {
                keyword: "",
                sortType: 0,//0原顺序,1升序,2 降序@click="changeSortType"
                persons: [ //原始人员列表
                    {id: '001', name: '马冬梅', age: 19, sex: '女'},
                    {id: '002', name: '周冬雨', age: 18, sex: '女'},
                    {id: '003', name: '周杰伦', age: 21, sex: '男'},
                    {id: '004', name: '温兆伦', age: 20, sex: '男'}
                ],
            }
        },
        computed: {
            fmtPersons() {
                //先过滤 在排序 然后返回一个arr
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyword) !== -1
                })
                //排序 a-1升序 如果能进入判断,就证明需要排序
                if (this.sortType){
                    arr.sort((a, b)=>{
                        return this.sortType ===1 ? a.age - b.age : b.age - a.age
                    })
                }

                //返回值
                return arr
            }
        }
    })
</script>
</body>
</html>